import React, { useState, useEffect, useRef } from "react";
import { useNavigate } from "react-router-dom";
import { Button, Modal, Space, SearchBar, Toast, Divider, Input } from "antd-mobile";
import { RightOutline } from 'antd-mobile-icons'

import Tar from '../../hooks/index'
import { Tabs } from "antd-mobile";
import axios from "axios";
import dayjs from "dayjs";
import "./style.css";
function Order() {
  let [accessToken, setaccessToken] = useState(JSON.parse(localStorage.getItem('accessToken')) || "")
  const [visible, setVisible] = useState(false);
  const [value, setValue] = useState("");
  const [list, setList] = useState([]);
  const [cate, setCate] = useState([]);
  const [activeKey, setActiveKey] = useState([

  ]);
  const nuvigate = useNavigate();
  const handBut = () => {

    Toast.show({
      icon: "success",
      content: "抢单成功",
      duration: 2000,
    });
    nuvigate("/wxq/ord/details", {
      state: activeKey
    });
  };

  const handBut2 = () => {

    Toast.show({
      icon: "success",
      content: "测量成功",
      duration: 2000,
    });
    nuvigate("/wxq/ord/details", {
      state: activeKey
    });
  };
  const handYbut = (i) => {
    Toast.show({
      icon: "success",
      content: "预约纪录",
      duration: 2000,
    });
    console.log(i)
    nuvigate("/wxq/ord/OrderList", {
      state: i
    });
  };
  let getList = async () => {
    let res = await axios.get("http://localhost:3000/order_list", {
      headers: {
        'Authorization': accessToken
      }
    });
    setList(res.data.data);
  };
  let cateList = async () => {
    let res = await axios.get("http://localhost:3000/orcate_list", {
      headers: {
        'Authorization': accessToken
      }
    });
    setCate(res.data.data);
  };
  useEffect(() => {
    getList();
    cateList()
  }, []);
  let handeelAnt = async (e) => {
    let res = await axios.post('http://localhost:3000/order_cate', {
      i: e
    },
      {
        headers: {
          'Authorization': accessToken
        }
      })
    setList(res.data.data)
  }
  let handelAtmu = async (e) => {
    console.log(e)
    setVisible(true);
    setActiveKey(e)
  }

  return (
    <div>
      <div className="inp">
        <SearchBar
          className="searchBar"
          placeholder="请输入内容"
          value={value}
          onChange={(val) => {
            setValue(val);
          }}

        />
      </div>
      <div className="tabbar">
        <Tabs onChange={e => {
          handeelAnt(e)
        }}>
          <Tabs.Tab title="全部" key="1" />
          {
            cate.map((item, index) => {

              return <Tabs.Tab title={item.name} key={item._id}></Tabs.Tab>
            })
          }
        </Tabs>
      </div>
      <div className="ordBox">
        {list.map((item, index) => {
          return (
            <div className="ordItem" key={item._id}>
              <div className="ordItemTop">
                <div style={{ paddingLeft: "10px" }}>
                  <b>{item.name}</b>
                </div>
                <div style={{ paddingRight: "10px" }}>{item.state}<RightOutline /></div>
              </div>
              <div className="ordItemList">
                <div className="ordItemLeft">
                  <p className="ordItemLeftTitle">发布日期</p>
                  <p className="ordItemLeftTitle">测量日期</p>
                </div>
                <div className="ordItemLeft">
                  <p className="ordItemLeftTitles">{dayjs(item.rime).format("MM-DD")}日</p>
                  <p className="ordItemLeftTitles">{dayjs(item.time).format("MM-DD")}日<span className="spans">8-10点</span></p>

                </div>
                <div className="ordItemLefts">
                  <p className="ordItemLeftTitle">客户</p>
                  <div className="ordItemLeftTitlest">
                    <p>{item.customer}</p>
                    <p style={{ width: "1.2rem" }}></p>
                    <p>{item.cprint}</p>
                    <p></p>
                  </div>
                </div>
                <div className="ordItemLefts">
                  <p className="ordItemLeftTitle">导购</p>
                  <div>
                    <p>{item.ShoopG}</p>
                    <p style={{ width: "1.2rem" }}></p>

                    <p>{item.sprint}</p>
                    <p></p>
                  </div>
                </div>
                <div className="ordItemLefts">
                  <p className="ordItemLeftTitle">测量地址</p>
                  <p>{item.address}</p>
                </div>
                <div className="ordItemLefts">
                  <p className="ordItemLeftTitle">工价</p>
                  <p className="price">￥{item.price}</p>
                </div>
                <div className="ordItemBottom">
                  <div className="BottonLeft">
                    <Button
                      onClick={() => {
                        handYbut(item);
                      }}
                      color="default"
                      fill="outline"
                      size="small"
                    >
                      预约纪录
                    </Button>
                    <Button
                      onClick={() => {
                        handelAtmu(item)

                      }}
                      color="primary"
                      fill="outline"
                      size="small"

                    >
                      {
                        item.state == '待预约' ? '立即预约' :
                          item.state == '待抢单' ? '立即抢单' :
                            item.state == '待测量' ? '立即测量' :
                              item.state == '待外出' ? '立即外出' : ''
                      }
                    </Button>
                    <Modal
                      className="boxsM"
                      visible={visible}
                      title="提示"
                      content={
                        <div>
                          <p>确认要抢这个测量任务？如果逾期未完成，将对您的信誉有所影响哦！！</p>
                          {
                            item.state == '已测量' ?
                              <div className="modalBtn">
                                <Button
                                  className="buttons"
                                  color="default"
                                  fill="outline"

                                  onClick={() => {
                                    setVisible(false);
                                  }}
                                >
                                  取消测量
                                </Button>
                                <Button
                                  className="buttons"
                                  color="default"
                                  fill="outline"
                                  size="small"
                                  onClick={() => {
                                    handBut2(item)
                                  }}
                                >
                                  确认测量
                                </Button>
                              </div>
                              :
                              <div className="modalBtn">
                                <Button
                                  className="buttons"
                                  color="default"
                                  fill="outline"

                                  onClick={() => {
                                    setVisible(false);
                                  }}
                                >
                                  取消抢单
                                </Button>
                                <Button
                                  className="buttons"
                                  color="default"
                                  fill="outline"
                                  size="small"
                                  onClick={() => {
                                    handBut(item)
                                  }}
                                >
                                  确认抢单
                                </Button>
                              </div>
                          }

                        </div>
                      }
                      closeOnAction
                      onClose={() => {
                        setVisible(false);
                      }}
                    />
                  </div>
                </div>
              </div>
            </div>
          );
        })}
      </div>
      <Tar>

      </Tar>
    </div>
  );
}

export default Order;
